import React from 'react';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Input from '@mui/material/Input';
import FormHelperText from '@mui/material/FormHelperText';
import Event from '../formHoc'
//
const _ = window._;

@Event
class IndexInput extends React.PureComponent{
    options = {
        name:'',
        text:'No label',
        value:'',
        error:'',
        rules:[],
        props:{},
        onChange:()=>{},
        onBlur:()=>{},
        onKeyDown:()=>{}
    }

    handleChange = (e)=>{
        this._set(e.target.value);
        this._validate();
        this.options.onChange(this.props.data,this.options);
    }

    handleBlur = (e)=>{
        this.options.onBlur(this.props.data,this.options);
    }

    constructor(props){
        super();
        this._extendColumn(props);
    }

    render(){
        let opt = this.options;
        let itemClz = ['ivu-form-item'];
        if(opt.rules.indexOf("required")>-1){
            itemClz.push('ivu-form-item-required')
        }
        if(opt.error){
            itemClz.push('ivu-form-item-error')
        }
        return (
            <div className={itemClz.join(' ')}>
                <label className="ivu-form-item-label">
                    {opt.text} :
                </label>
                <div className="ivu-form-item-content">
                    <div className="ivu-input-wrapper ivu-input-type">
                        <input autoComplete="off" spellCheck="false" type="text" placeholder="" className="ivu-input"
                               {...opt.props}
                               value={opt.value}
                               onChange={this.handleChange}
                               onBlur={this.handleBlur}/>
                    </div>
                    <div className="ivu-form-item-error-tip">{opt.error}&nbsp;</div>
                </div>
            </div>
        )
    }
}

export default IndexInput;

{/*<FormControl fullWidth error={Boolean(opt.error)}>*/}
    {/*<InputLabel htmlFor="my-input">{opt.text}</InputLabel>*/}
    {/*<Input {...opt.props} value={opt.value} onChange={this.handleChange} onKeyUp={this.options.onKeyDown} margin={'dense'}/>*/}
    {/*<FormHelperText >{opt.error}&nbsp;</FormHelperText>*/}
{/*</FormControl>*/}
